<template>
  <article class="vivid-typography">
    <slot></slot>
  </article>
</template>


<style scoped>
.vivid-typography {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.vivid-typography :is(h1, h2, h3, h4, h5, h6) {
  display: block;
  width: 100%;
}

.vivid-typography> :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {

  gap: .5rem;

}
</style>
